<template>
       <el-autocomplete
              class="wp-form-280"
              v-model="employee_name"
              :fetch-suggestions="querySearchAsync"
              placeholder="请选择"
              @select="handleSelect"
              @blur="checkValue"
            >
              <i
                class="el-icon-search el-input__icon"
                slot="suffix"
                @click="handleQuery"
              >
              </i>
              <template slot-scope="{ item }">
                <div class="show-name">{{ item.employeeName }}</div>
              </template>
            </el-autocomplete>
</template>
<script>
import employee from '@/api/system/employeeAPI'
export default {
  components: {},
  model: {
    prop: 'employeeCode',
    event: 'ee'
  },
  props: {
    employeeCode: String,
    employeeName: String
  },
  data () {
    return {
      employeeInfoList: [],
      valueIsOk: true,
      employee_code: this.employeeCode,
      employee_name: this.employeeName
    }
  },
  watch: {
    employee_code (val) {
      this.$emit('ee', val)
      this.$emit('update:employeeCode', val)
    },
    employee_name (val) {
      if (!val || val === '') {
        this.employee_code = ''
      }
      this.$emit('update:employeeName', val)
    }
  },
  mounted () {
    this.getEmployeeList()
  },
  methods: {
    querySearchAsync (queryString, cb) {
      let employeeInfoList = this.employeeInfoList
      let results = queryString ? employeeInfoList.filter((item) => {
        return (item.employeeName.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }) : employeeInfoList
      if (results && results.length <= 0) {
        this.valueIsOk = false
      }
      cb(results)
    },
    handleSelect (item) {
      this.employee_code = item.employeeCode
      this.employee_name = item.employeeName
    },
    handleQuery () {
      this.getEmployeeList()
    },
    checkValue () {
      if (!this.valueIsOk) {
        this.employee_name = ''
      }
    },
    getEmployeeList (params) {
      const p = params && params !== undefined ? params : {}
      p.isPage = false
      employee.getEmployeeListAPI(p).then((res) => {
        this.employeeInfoList = res.data && res.data !== null ? res.data.list : []
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
